<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="js/index.js"></script>
    <title>Vue</title>
</head>
<body>
<div id="app">
    {{ message }}
</div>

<div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
</div>

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

<div id="app-6">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<div id="app-7">
    <ol>
        <!-- 现在我们为每个todo-item提供待办项对象    -->
        <!-- 待办项对象是变量，即其内容可以是动态的 -->
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
</div>

<div id="example">
    <p>Original message: "{{message}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
</div>

<div id="app8" v-bind:class="{active:isActive,'text-danger':hasError}">
    App8
</div>

<div id="app9" v-bind:class="[isActive? activeClass:'',errorClass]">
    App9
</div>

<div id="app10" v-bind:class="[activeClass]">
    App10
</div>

<div id="app11">
    <my-component class="baz boo"></my-component>
</div>

<div id="example-2">
    <button v-on:click="greet()">Greet</button>
</div>

<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>

<div id="example4">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

<div id="example-5">
    <child my-message="hello"></child>
</div>


</body>
</html>